<template>
    <el-form :model="ruleForm"   :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="name">
            <el-input v-model="ruleForm.goodsName"></el-input>
        </el-form-item>

        <el-form-item label="商品编号" prop="goodsUuid">
            <el-input v-model="ruleForm.goodsUuid"></el-input>
        </el-form-item>

        <el-form-item label="商品分类" prop="region" class="selfenlei">
            <el-select v-model="ruleForm.goodsTypeId" placeholder="请选择分类商品">
                <el-option
                        v-for="item in ruleForm.options"
                        :key="item.region"
                        :label="item.goodsTypeName"
                        :value="item.goodsTypeId">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="商品简介" prop="jianjie" >
            <el-input type="textarea" v-model="ruleForm.goodsDesc" class="txtareasize" rows="4"></el-input>
        </el-form-item>

        <el-form-item label="商品标签" prop="type" class="ckbianqian">
            <el-checkbox-group v-model="ruleForm.tagIds">
                <el-checkbox
                        v-for="(item,index) in ruleForm.arrFuXuan"
                        :key="index"
                        :label="item.tagId">
                    {{item.tagName}}
                </el-checkbox>
            </el-checkbox-group>

        </el-form-item>

        <el-form-item label="限购数量" prop="num" >
            <el-input v-model="ruleForm.num" placeholder="0为不限购"></el-input>
        </el-form-item>

        <el-form-item label="虚拟销量" prop="num" >
            <el-input v-model="ruleForm.goodsVirtualSale"></el-input>
        </el-form-item>



        <el-form-item label="商品价格" prop="shopprice">
            <el-input v-model="ruleForm.goodsPrice"></el-input>
        </el-form-item>

        <el-form-item label="拼团价格" prop="price">
            <el-row :span="12">
                <el-col  :span="10" class="leftpin">
                    <span class="zi" style="text-align: left">团购人数</span>
                    <el-select v-model="ruleForm.defineGroup.defineGroupPeopleNum" placeholder="请选择拼团人数">
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                    </el-select>
                </el-col>
                <el-col  :span="10" class="leftpin">
                    <span class="zi" style="text-align: left">价格</span>
                    <el-input class="inputM" v-model="ruleForm.defineGroup.defineGroupPrice"></el-input>
                </el-col>

            </el-row>


        </el-form-item>


        <el-form-item label="优惠券" prop="type" class="radioleft">
            <template>
                <el-radio-group v-model="ruleForm.goodsCoupon" >
                    <el-radio  :label="1">是</el-radio>
                    <el-radio  :label="0" >否</el-radio>
                </el-radio-group>
            </template>
        </el-form-item>

        <el-form-item label="是否上架" prop="type" class="radioleft">
            <template>
                <el-radio-group v-model="ruleForm.goodsStatus" >
                    <el-radio  :label="1">是</el-radio>
                    <el-radio  :label="0" >否</el-radio>
                </el-radio-group>
            </template>
        </el-form-item>


        <el-form-item label="使用积分" prop="type" class="radioleft">
            <template>
                <el-radio-group v-model="ruleForm.goodsPoint" >
                    <el-radio  :label="1">是</el-radio>
                    <el-radio  :label="0" >否</el-radio>
                </el-radio-group>
            </template>
        </el-form-item>

        <el-form-item label="市场价格" prop="price">
            <el-input v-model="ruleForm.goodsMarketPrice"></el-input>
        </el-form-item>


        <el-form-item label="商品规格" prop="shopsize">
            <el-button type="primary" plain  @click="addGuiGe" style="margin-left:-430px">添加</el-button>

            <el-table :data="ruleForm.goodsFormatList">
                <el-table-column prop="name" label="名称">
                    <template slot-scope="scope">
                        <el-input class="inputM" v-model="ruleForm.goodsFormatList[scope.$index].goodsFormatName"></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="price" label="价格">
                    <template slot-scope="scope">
                        <el-input class="inputM" v-model="ruleForm.goodsFormatList[scope.$index].goodsFormatPrice"></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="kuCun" label="库存">
                    <template slot-scope="scope">
                        <el-input class="inputM" v-model="ruleForm.goodsFormatList[scope.$index].goodsFormatStock"></el-input>
                    </template>
                </el-table-column>

                <el-table-column prop="caoZuo" label="操作">
                    <template slot-scope="scope">
                        <!--                         <el-button @click="del(scope.$index)">删除</el-button>-->
                        <el-button type="danger" plain class="del" @click="delGuiGe(scope.$index)" >删除</el-button>
                    </template>
                </el-table-column>

            </el-table>



            <!--            <el-col  :span="10" class="left">-->
            <!--                <span class="zi" style="text-align: left">名称</span>-->
            <!--                <el-input class="inputM" v-model="ruleForm.shangName"></el-input>-->
            <!--            </el-col>-->
            <!--            <el-col  :span="10" class="left">-->
            <!--                <span class="zi" style="text-align: left">价格</span>-->
            <!--                <el-input class="inputM" v-model="ruleForm.shangPrice"></el-input>-->
            <!--            </el-col>-->
            <!--            <el-col  :span="10" class="left">-->
            <!--                <span class="zi" style="text-align: left">库存</span>-->
            <!--                <el-input class="inputM" v-model="ruleForm.shangCun"></el-input>-->
            <!--            </el-col>-->
            <!--            <el-col  :span="10" class="left">-->
            <!--                <span class="zi" style="text-align: left">图片</span>-->
            <!--                <el-input class="inputM" type="file" v-model="ruleForm.shangImg"></el-input>-->
            <!--            </el-col>-->
            <!--            <el-col :span="10" class="btnguige">-->
            <!--                <el-button type="primary" plain class="add">添加</el-button>-->
            <!--                <el-button type="danger" plain class="del">删除</el-button>-->
            <!--            </el-col>-->
        </el-form-item>


        <!--        <el-form-item label="商品图片" prop="shopimg">-->
        <!--            <el-upload  style="text-align: left"-->
        <!--                    action="#"-->
        <!--                    list-type="picture-card"-->
        <!--                    :auto-upload="false"-->


        <!--            >-->
        <!--                <i slot="default" class="el-icon-plus"></i>-->
        <!--                <div slot="file" slot-scope="{file}"    >-->
        <!--                    <img-->
        <!--                            class="el-upload-list__item-thumbnail"-->
        <!--                            :src="file.url" alt="">-->

        <!--                    <span class="el-upload-list__item-actions">-->
        <!--               <span-->
        <!--                class="el-upload-list__item-preview"-->
        <!--                @click="handlePictureCardPreview(file)">-->
        <!--                <i class="el-icon-zoom-in"></i>-->
        <!--              </span>-->
        <!--               <span-->
        <!--                v-if="!disabled"-->
        <!--                class="el-upload-list__item-delete"-->
        <!--                @click="handleDownload(file)">-->
        <!--          <i class="el-icon-download"></i>-->
        <!--        </span>-->
        <!--        <span-->
        <!--                v-if="!disabled"-->
        <!--                class="el-upload-list__item-delete"-->
        <!--                @click="handleRemove(file)">-->
        <!--          <i class="el-icon-delete"></i>-->
        <!--        </span>-->
        <!--         </span>-->
        <!--                </div>-->
        <!--            </el-upload>-->
        <!--            <el-dialog :visible.sync="dialogVisible">-->
        <!--                <img width="100%" :src="dialogImageUrl" alt="">-->
        <!--            </el-dialog>-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="商品相册" prop="" style="text-align: left">-->
        <!--            <el-upload-->
        <!--                    ref="upload"-->
        <!--                    action="/api/goods/getGoodsType"-->
        <!--                    list-type="picture-card"-->
        <!--                    :auto-upload="false"-->

        <!--                    multiple-->

        <!--            >-->
        <!--                <i slot="default" class="el-icon-plus"></i>-->

        <!--                <div slot="file" slot-scope="{file}"    :http-request="toMyFile(file)">-->
        <!--                    <img-->
        <!--                            class="el-upload-list__item-thumbnail"-->
        <!--                            :src="file.url" alt=""-->
        <!--                    >-->
        <!--                    <span class="el-upload-list__item-actions">-->
        <!--        <span-->
        <!--                class="el-upload-list__item-preview"-->
        <!--                @click="handlePictureCardPreview(file)"-->
        <!--        >-->
        <!--          <i class="el-icon-zoom-in"></i>-->
        <!--        </span>-->
        <!--        <span-->
        <!--                v-if="!disabled"-->
        <!--                class="el-upload-list__item-delete"-->
        <!--                @click="handleDownload(file)"-->
        <!--        >-->
        <!--          <i class="el-icon-download"></i>-->
        <!--        </span>-->
        <!--        <span-->
        <!--                v-if="!disabled"-->
        <!--                class="el-upload-list__item-delete"-->
        <!--                @click="handleRemove(file)"-->
        <!--        >-->
        <!--          <i class="el-icon-delete"></i>-->
        <!--        </span>-->
        <!--      </span>-->
        <!--                </div>-->
        <!--            </el-upload>-->
        <!--            <el-dialog :visible.sync="dialogVisible">-->
        <!--                <img width="100%" :src="dialogImageUrl" alt="">-->
        <!--            </el-dialog>-->

        <!--        </el-form-item>-->

        <el-form-item label="商品库存" prop="ckshop">
            <el-input v-model="ruleForm.goodsStock"></el-input>
        </el-form-item>



        <el-form-item label="免运费" prop="yunfei" class="mianyunfei">
            <template>
                <el-radio-group v-model="ruleForm.goodsFreeShipping">
                    <el-radio  :label="1">是</el-radio>
                    <el-radio  :label="0" >否</el-radio>
                </el-radio-group>

                <el-input v-model="ruleForm.goodsPostage" placeholder="请填写运费价格" v-if="ruleForm.goodsFreeShipping==0"></el-input>

            </template>
        </el-form-item>

        <el-form-item label="商品备注" prop="jianjie" >
            <el-input type="textarea" v-model="ruleForm.goodsRemarks" rows="6"></el-input>
        </el-form-item>

        <el-form-item class="submit">
            <el-button type="primary" plain @click="sureMix">确定</el-button>
        </el-form-item>


    </el-form>

</template>

<script>
    import qs from "qs";

    export default {
        name: "mix",
        data() {
            return {
                id:'',    //得到要修改的id
                mfile:'',
                //表单数据
                ruleForm: {
                    //拼团人数和价格
                    defineGroup:{
                        defineGroupPeopleNum:'',
                        defineGroupPrice:'',
                    },

                    tagIds:[],                    //商品标签复选框绑定值
                    arrFuXuan:[],               //商品标签复选框动态对象


                    // dialogImageUrl: '',       //相框
                    // dialogVisible: false,
                    // disabled: false,



                    goodsFormatList:[
                        {
                            goodsFormatName:'',
                            goodsFormatPrice:'',
                            goodsFormatStock:'',
                        }
                    ],      //商品规格三个，名字价格库存



                    options:[],
                    goodsCoupon: 1,   //优惠券
                    goodsFreeShipping:1,   //免运费
                    goodsPostage:'',  //运费价格
                    goodsStatus:1,  //是否上架
                    goodsPoint:1,  //使用积分



                    goodsName: '',    //商品名称
                    goodsUuid:'',       //商品编号
                    goodsTypeId:'',   //商品分类
                    goodsDesc:'',      //商品简介

                    num:'',         //商品限购数量
                    goodsPrice:'',    //商品价格


                    goodsMarketPrice:'',  //市场价格

                    goodsStock:'',      //商品库存

                    goodsRemarks:'',     //商品备注
                    goodsVirtualSale:'',  //虚拟销量

                },
                rules: {
                    // name: [
                    //     { required: true, message: '请输入商品名称', trigger: 'blur' },
                    //     // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    // ],
                    // id: [
                    //     { required: true, message: '请输入商品编号', trigger: 'blur' },
                    //     // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    // ],
                    // region: [
                    //     { required: true, message: '请选择分类', trigger: 'change' }
                    // ],
                    // num: [
                    //     { required: true, message: '请填写限购数量', trigger: 'blur' }
                    // ],
                    // shopprice: [
                    //     { required: true, message: '请填写商品价格', trigger: 'blur' }
                    // ],
                    // shopsize:[
                    //     { required: true, message: '请填写完整商品规格', trigger: 'blur' }
                    // ],
                    // shopimg: [
                    //     { required: true, message: '请选择商品图片', trigger: 'blur' }
                    // ],

                    // ckshop: [
                    //     { required: true, message: '请填写商品库存', trigger: 'blur' }
                    // ],
                    // yunfei:[
                    //     { required: true, message: '请选择运费', trigger: 'blur' }
                    // ],





                    // date2: [
                    //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    // ],
                    // type: [
                    //     { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    // ],
                    // resource: [
                    //     { required: true, message: '请选择活动资源', trigger: 'change' }
                    // ],
                    // desc: [
                    //     { required: true, message: '请填写活动形式', trigger: 'blur' }
                    // ]
                }
            };
        },
        methods:{

            //添加商品规格
            addGuiGe(){
                this.ruleForm.goodsFormatList.push({});
            },
            delGuiGe(index){
                this.ruleForm.goodsFormatList.splice(index,1);
            },








            sureMix(){
                this.ruleForm.goodsFormatList = this.ruleForm.goodsFormatList.map((item)=>{
                    var obj = {...item};
                    return obj;
                })
                var params=qs.stringify({
                    goodsId:this.id,
                    tagIds:Array.from(this.ruleForm.tagIds),
                    goodsTypeId: this.ruleForm.goodsTypeId,
                    goodsName: this.ruleForm.goodsName,
                    goodsUuid: this.ruleForm.goodsUuid,

                    goodsDesc: this.ruleForm.goodsDesc,
                    num: this.ruleForm.num,
                    goodsPrice: this.ruleForm.goodsPrice,


                    'defineGroup.defineGroupPeopleNum': this.ruleForm.defineGroup.defineGroupPeopleNum,
                    'defineGroup.defineGroupPrice': this.ruleForm.defineGroup.defineGroupPrice,

                    goodsCoupon: this.ruleForm.goodsCoupon,
                    goodsStatus: this.ruleForm.goodsStatus,
                    goodsPoint: this.ruleForm.goodsPoint,
                    goodsMarketPrice: this.ruleForm.goodsMarketPrice,
                    goodsFormatList: this.ruleForm.goodsFormatList,
                    goodsStock: this.ruleForm.goodsStock,

                    goodsFreeShipping: this.ruleForm.goodsFreeShipping,     //运费
                    goodsPostage: this.ruleForm.goodsPostage,             //运费价格
                    goodsRemarks: this.ruleForm.goodsRemarks,

                    goodsVirtualSale:this.ruleForm.goodsVirtualSale,     //虚拟销量
                }, { arrayFormat: 'indices' , allowDots: true})

                this.$axios({
                    url: '/api/goods/update/do?'+params,
                    method:'post',
                    // data:params,
                }).then((res)=>{

                    console.log("你好")
                    console.log(res)

                })

            }
        },







        created() {
            // this.form.name=res.data.data.tagName
            this.id= sessionStorage.getItem('userId');
            // console.log("得到id了吗？")
            // console.log(this.id)
            this.$axios.post('/api/goods/update/page?goodsId='+this.id).then((res)=>{
                // console.log("成功拿到数据了吗？")
                console.log(res.data.data)
                res.data.data.tags.forEach(v=>{
                    this.ruleForm.tagIds.push(v.tagId)
                })
                // console.log(this.ruleForm.tagIds)
                this.ruleForm.goodsName=res.data.data.goodsName
                this.ruleForm.goodsUuid=res.data.data.goodsUuid
                this.ruleForm.goodsTypeId=res.data.data.goodsType.goodsTypeId
                this.ruleForm.goodsDesc=res.data.data.goodsDesc
                this.ruleForm.num=res.data.data.num
                this.ruleForm.goodsPrice=res.data.data.goodsPrice

                this.ruleForm.defineGroup.defineGroupPeopleNum=res.data.data.defineGroup.defineGroupPeopleNum
                console.log(this.ruleForm.defineGroup.defineGroupPeopleNum)

                this.ruleForm.defineGroup.defineGroupPrice=res.data.data.defineGroup.defineGroupPrice
                console.log(this.ruleForm.defineGroup.defineGroupPrice)
                this.ruleForm.goodsCoupon=res.data.data.goodsCoupon
                this.ruleForm.goodsStatus=res.data.data.goodsStatus
                this.ruleForm.goodsPoint=res.data.data.goodsPoint
                this.ruleForm.goodsMarketPrice=res.data.data.goodsMarketPrice
                this.ruleForm.goodsFormatList=res.data.data.goodsFormatList
                this.ruleForm.goodsStock=res.data.data.goodsStock
                this.ruleForm.kuCunTi=res.data.data.kuCunTi
                this.ruleForm.goodsFreeShipping=res.data.data.goodsFreeShipping
                this.ruleForm.goodsPostage=res.data.data.goodsPostage
                this.ruleForm.goodsRemarks=res.data.data.goodsRemarks

                this.ruleForm.goodsVirtualSale=res.data.data.goodsVirtualSale
                this.ruleForm.goodsRealSale=res.data.data.goodsRealSale

            })


            this.$axios.post('/api/goods/getInitData').then((res)=>{
                this.ruleForm.options=res.data.data.goodsType;  //获取商品分类
                this.ruleForm.arrFuXuan=res.data.data.goodsTag      //获取复选框
                // this.ruleForm.goodsUuid=res.data.data.goodsUuid   //获取商品编号
            })
        }

    }
</script>

<style scoped>
    .demo-ruleForm{
        width: 600px;
    }
    .selfenlei{
        text-align: left;
    }
    .ckbianqian{
        text-align: left;
    }
    .leftpin{
        margin: 5px;
    }
    .btnleft{
        text-align: left;
        margin: 5px;
    }
    .radioleft{
        text-align: left;
    }

    .zi{
        margin: 5px;
    }
    .left{
        margin-right: 10px;
    }

    .btnguige{
        margin-top: 38px;
    }

    .mianyunfei{
        text-align: left;
    }
    .submit{
        text-align: left;
    }
    /*.el-button--primary.is-plain{*/
    /*    margin-left: -430px;*/
    /*}*/

</style>